<template>
  <div
    class="main"
    id="main"
    v-title
    :data-title="this.$route.query.ip + '主机连接'"
  >
    <div id="terminal"></div>
    <div class="fullScreen" @click="fullscreen">
      <i class="el-icon-full-screen"></i>
    </div>
    <!-- <el-button @click="fullscreen">全屏</el-button> -->

    <!-- <div>{{ this.$route.query.ip }}</div>
    <div>{{ this.$route.query.username }}</div>
    <div>{{ this.$route.query.password }}</div> -->
  </div>
</template>

<script>
import "xterm/dist/xterm.css";
import { Terminal } from "xterm";
import * as attach from "xterm-addon-attach";
import * as fit from "xterm/lib/addons/fit/fit";
import * as fullscreen from "xterm/lib/addons/fullscreen/fullscreen";
Terminal.applyAddon(fullscreen);
Terminal.applyAddon(fit);
export default {
  data() {
    return {
      term: null,
      terminalSocket: null,
      order: "",
      isFull: false,
      offsetWidth: "",
      offsetHeight: "",
    };
  },
  mounted() {
    // 浏览器内容区域宽高
    this.offsetWidth = document.body.offsetWidth;
    this.offsetHeight = document.body.offsetHeight;
    // console.log(this.offsetWidth);
    window.onresize = () => {
      return (() => {
        this.offsetWidth = document.body.offsetWidth;
        this.offsetHeight = document.body.offsetHeight;
        this.term.resize(
          Math.floor(this.offsetWidth / 10),
          Math.floor(this.offsetHeight / 17)
        );
      })();
    };
    // console.log(Math.floor(this.offsetHeight / 17));

    // console.log(window.screen.height);
    // console.log(this.$route.query.ip);
    //实例化一个websocket，用于和django江湖
    this.terminalSocket = new WebSocket(
      "ws://8.218.222.193:8000/api/echo_once/" +
        this.$route.query.ip +
        "/" +
        this.$route.query.username +
        "/" +
        this.$route.query.password
    );
    //获取到后端传回的信息
    this.terminalSocket.onmessage = (res) => {
      console.log(res.data);
      // var message = JSON.parse(res.data);
      //将传回来的数据显示在xterm里
      this.term.writeln("\r\n" + res.data);
      //重置要发送的信息
      this.order = "";
      //换行，显示下一个开头
      this.term.write("\r\n$ ");
    };
    // ws连接的时候
    this.terminalSocket.onopen = () => {
      this.terminalSocket.send("/0");
      //在xterm上显示命令行提示
      // this.term.write("\r\n");
      // this.term.write("Connecting to " + this.$route.query.ip + " ...");
      // this.term.write("\r\nConnecting established");
      // this.term.write("\r\n");
      // this.term.write("\r\n$ ");
      console.log("websocket is Connected...");
    };
    // ws关闭的时候  readyState 变为 CLOSED时被调用
    this.terminalSocket.onclose = () => {
      console.log("websocket is Closed...");
    };
    // ws错误的时候
    this.terminalSocket.onerror = () => {
      // this.term.write("\r\nConnecting failure");
      console.log("damn Websocket is broken!");
    };

    // 绑定xterm到ws流中 },
    let terminalContainer = document.getElementById("terminal");
    console.log(terminalContainer);
    //创建xterm实例
    this.term = new Terminal({
      //   rendererType: "canvas",
      cols: Math.floor(this.offsetWidth / 10), // 列数
      rows: Math.floor(this.offsetHeight / 17), // 行数
      cursorBlink: true, // 显示光标
      cursorStyle: "underline", // 光标样式
    }); // 创建一个新的Terminal对象
    this.term.open(terminalContainer); // 将term挂载到dom节点上

    // this.term.toggleFullScreen(); //全屏
    // window.onresize = function () {
    //   this.term.fit();
    //   this.term.toggleFullScreen(); //全屏
    // };
    // console.log(this.term.fit);

    this.term.focus(); // 获得焦点
    console.log(this.term.scroll);
    //监听xterm的键盘事件
    this.term.on("key", (key, ev) => {
      // key是输入的字符 ev是键盘按键事件
      this.term.write(key); // 将输入的字符打印到黑板中
      switch (ev.keyCode) {
        case 13:
          // 按下回车
          this.order = this.order + "/1";
          //使用webscoket将数据发送到django
          this.terminalSocket.send(this.order);
          break;
        case 8:
          //删除按钮
          console.log(this.order);
          //截取字符串[0,lenth-1]
          this.order = this.order.substr(0, this.order.length - 1);
          //清空当前一条的命令
          this.term.write("\x1b[2K\r");
          //简化当前的新的命令显示上
          this.term.write("$ " + this.order);
          typeof this.order;
          break;

        default:
          console.log(ev.keyCode);
          this.order += key;
          break;
      }
    });
  },
  methods: {
    fullscreen() {
      this.isFull = !this.isFull;
      if (this.isFull) {
        // this.term.resize(90, 50);
        let element = document.getElementById("main");
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  // margin: 15px;
  position: relative;
  width: 100%;
  background-color: #000;
  height: 100%;
  // padding: 15px;
}
// #terminal {
//   box-shadow: 5px 5px 20px #242424;
// }
.fullScreen {
  position: absolute;
  top: 10px;
  right: 30px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 999;
}
</style>